@charset "UTF-8";

.page-world-views {
  position: relative;
  height: 100vh;
  overflow: hidden;

  /* 背景 */
  .bg {
    position: absolute;
    inset: 0;
    img {
      width: 100%;
      height: 100%;
    }
  }

  /* 左侧区域 */
  .left-area {
    position: absolute;
    top: 15vh;
    left: 3vw;
  }

  /* 右侧区域 */
  .right-area {
    position: absolute;
    top: 24vh;
    right: 0;
    width: 1591px;
    height: 522px;
    .content {
      display: grid;
      grid-template-columns: 334px 186px 195px 234px 288px 354px;
      grid-template-rows: 155px 53px 27px 49px 102px 137px;
      grid-template-areas:
        'img01 img01 img04 img06 img09 img11'
        'img01 img01 img04 img06 img10 img11'
        'img01 img01 img04 img07 img10 img11'
        'img02 img03 img04 img07 img10 img11'
        'img02 img03 img05 img07 img10 img11'
        'img02 img03 img05 img08 img08 img11';
      .item {
        position: relative;
        cursor: pointer;
        transition: all 0.3s;
        &:hover {
          z-index: 10;
          transform: scale(1.1);
          .item__info {
            display: block;
          }
        }
        &.item--01 {
          grid-area: img01;
        }
        &.item--02 {
          grid-area: img02;
        }
        &.item--03 {
          grid-area: img03;
        }
        &.item--04 {
          grid-area: img04;
        }
        &.item--05 {
          grid-area: img05;
        }
        &.item--06 {
          grid-area: img06;
        }
        &.item--07 {
          grid-area: img07;
        }
        &.item--08 {
          grid-area: img08;
        }
        &.item--09 {
          grid-area: img09;
        }
        &.item--10 {
          grid-area: img10;
        }
        &.item--11 {
          grid-area: img11;
        }
        img {
          width: 100%;
        }
        .item__info {
          position: absolute;
          right: 0;
          left: 0;
          bottom: 0;
          display: none;
          padding: 10px 20px;
          background-color: rgba(0, 0, 0, 0.8);
          color: #fff;
          .item__title {
            font-size: 26px;
            font-weight: 700;
            color: #e0ceaa;
          }
        }
      }
    }
  }
}
